<template>
  <!-- 客户分户管理--客户回收 -->
  <div class="customer-recycle-container">
    <div class="cus-recycle-title">
      <h1>贵宾客户分配任务详情</h1>
    </div>
    <div class="unassigned-customers-list">
      <h1>未分配贵宾客户列表</h1>
      <div class="table-list">
        <ui-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :cell-class-name="cellClass">
          <ui-table-column type="selection" width="55" :selectable="selectable"></ui-table-column>>
          <ui-table-column label="客户号" prop="customerNo"> </ui-table-column>
          <ui-table-column prop="cusname" label="客户名称" width="120"> </ui-table-column>
          <ui-table-column prop="cusType" label="客户类型" width="120"> </ui-table-column>
          <ui-table-column prop="address" label="联系电话" show-overflow-tooltip></ui-table-column>
          <ui-table-column prop="address" label="证件类型" show-overflow-tooltip></ui-table-column>
          <ui-table-column prop="address" label="证件号码" show-overflow-tooltip></ui-table-column>
          <ui-table-column prop="address" label="所属机构" show-overflow-tooltip></ui-table-column>
          <ui-table-column prop="address" label="金融资产" show-overflow-tooltip></ui-table-column>
          <ui-table-column prop="address" label="客户等级" show-overflow-tooltip></ui-table-column>
          <ui-table-column prop="address" label="分配状态" show-overflow-tooltip></ui-table-column>
        </ui-table>
        <div class="page">
          <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout" @current-change="handleCurrentChange">
          </ui-pagination>
        </div>
      </div>
    </div>
    <div style="text-align: center;">
      <ui-button @click="backpage">返回</ui-button>
      <ui-button type="primary" @click="distributionCustomers">分 配</ui-button>
    </div>
  </div>
</template>
<script>
import vxTable from '@/components/vx-table';
export default {
  components: {
    vxTable,
  },
  data() {
    return {
      total: 100,
      pageSize: 10,
      currentPage: 1,
      layout: 'total, prev, pager, next, jumper', // 分页顺序
      tableData: [
        {
          customerNo: '1',
          checkStatus: 0,
          cusname: '王小虎',
          cusType: '零售',
          address: '151****5263',
          address: '二代身份证',
          address: '************250058',
          address: '南苑支行',
          address: '200,000.00',
          address: 'V9',
          address: '待分配',
        },
        {
          customerNo: '1',
          checkStatus: 1,
          cusname: '王小虎',
          cusType: '零售',
          address: '151****5263',
          address: '二代身份证',
          address: '************250058',
          address: '南苑支行',
          address: '200,000.00',
          address: 'V9',
          address: '已分配',
        },
      ],
      buttomGroup: [{ label: '删除', methodsName: 'deleteData' }],
    };
  },
  methods: {
    backpage() {
      this.$router.push({
        path: '/customerdivision/vipCustomers',
      });
    },
    cellClass({ row, columnIndex }) {
      if (row.checkStatus == 1) {
        // 根据某个属性，添加样式，隐藏复选框
        return 'myCell';
      }
    },
    selectable(row, index) {
      if (row.checkStatus != 1) {
        return true;
      } else {
        return false;
      }
    },
    // 分配
    distributionCustomers() {
      this.$router.push({ path: '/customerdivision/vipCustomers/vipCustomersInput' });
    },
    // 页面改变
    handleCurrentChange(val) {},
  },
};
</script>

<style lang="scss" scoped>
.customer-recycle-container {
  .cus-recycle-title,
  .unassigned-customers-list {
    overflow: hidden;
    h1 {
      font-size: 20px;
      margin-bottom: 30px;
    }
  }
  .table-list {
    .page {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }
}
::v-deep .myCell .ui-checkbox__input {
  display: none !important;
}
</style>
